<template>
  <div id="app">
    <el-input v-model="value"
              placeholder=""
              @change="valueChange"></el-input>
    <!-- <router-view /> -->
    <div class="content">
      <div class="pxPicAll"
           id='pxPicAll'
           style="width:1152px">
        <div class="pxPicAll1"
             id='pxPicAll1'
             style="width:1152px">

          <div v-for="(item,i) in rgbArr"
               :key="i"
               style="height:5px">
            <div class="pxPic"
                 :style="{backgroundColor:randomColor()}"
                 v-for="(item2,j) in item"
                 :key="j">

            </div>
          </div>
        </div>
      </div>
      <img id="img"
           src="@/assets/hospitalMap/bjxh.png" />
    </div>
  </div>
</template>

<script>
import { rbfRandom } from "@/api/test"
export default {
  name: 'App',
  mounted() {
    // const isLogin = localStorage.getItem('isLogin')

    // if (isLogin) {
    //   const userInfo = localStorage.getItem('userInfo')
    //   const userInfoObj = JSON.parse(userInfo)
    //   this.$store.commit('user/resetMuts', userInfoObj)
    // }
    this.getImgInfo();
    // this.getRbfRabdom();
  },
  data() {
    return {
      sliderStyle: {
        width: '780px',
        height: "1000px"
      },
      widthArr: new Array(10000),
      heightArr: new Array(117),
      value: "",
      rgbArr: []
    }
  },
  methods: {
    valueChange(e) {
      if (!!e) {
        this.widthArr = new Array(Number(e));
      }
    },
    getRbfRabdom() {
      rbfRandom(100, 100).then(res => {
        // console.log(res.value);
        this.rgbArr = res.value;
      })
    },
    getImgInfo() {
      let self = this;
      //   let img = new Image()
      //   img.src = 'https://img.tukuppt.com/photo-big/00/00/94/6152bc0ce6e5d805.jpg';
      //   console.log();
      let img = document.getElementById("img");

      img.onload = function () {

        let imgW = document.getElementById("img").width;
        let imgH = document.getElementById("img").height;
        console.log('图片原始高度', img.height)
        console.log('图片原始宽度', img.width)

        document.getElementById("pxPicAll1").width = imgW;
        document.getElementById("pxPicAll").width = imgW;

        // this.widthArr = new Array(img.width);
        // this.heightArr = new Array(img.height);
        let w = Math.ceil(parseFloat(imgW / 5));
        let h = Math.ceil(parseFloat(imgH / 5));
        rbfRandom(w, h).then(res => {
          // console.log(res.value);
          self.rgbArr = res.value;
        })
      }
    },
    randomColor() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return `rgba(${r},${g},${b},0.3)`;
    }
  }
}
</script>
<style>
#id {
  background-color: #ccc;
}
.content {
  position: relative;
}
.pxPicAll {
  position: absolute;
}
/* 
.pxPicAll1 {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
} */
.pxPic {
  width: 5px;
  height: 5px;
  display: inline-block;
}
</style>
